<script setup lang='ts'>
interface Props {
  si: number
  ci: string
  isRegionOpen: boolean // 父级是否展开
}

defineOptions({ name: 'AppSportsOutrightLeague' })
const props = defineProps<Props>()

const list = ref<ISportOutrightsInfo[]>([])

const params = computed(() => {
  return {
    si: props.si,
    page: 1,
    page_size: 200,
    ci: props.ci
  }
})
const { run, runAsync, loading } = useRequest(ApiSportOutrightList, {
  onSuccess(res) {
    if (res.d) {
      list.value = res.d
    }
    else {
      list.value = []
    }
  }
})
/** 定时更新数据 */
const { startTimer, stopTimer } = useSportsDataUpdate(() => run(params.value))

function getData() {
  if (list.value.length > 0 || loading.value)
    return
  run(params.value)
}

watch(() => props.isRegionOpen, (a) => {
  if (a) {
    getData()
    startTimer()
  }
})

onDeactivated(() => {
  stopTimer()
})
onBeforeUnmount(() => {
  stopTimer()
})

if (props.isRegionOpen)
  await application.allSettled([runAsync(params.value)])
</script>

<template>
  <div>
    <template v-if="loading">
      <AppSportsOutrightInfoSkeleton class="mb-[16px]" v-for="i in 4" />
    </template>
    <template v-else>
      <AppSportsOutrightInfo v-for="market in list" :key="market.ei" :data="market" />
    </template>
  </div>
</template>

<style lang='scss' scoped></style>
